<template>
	<view>
		<Header></Header>
		<view class="main_wrap ">
			<view class="main br">
				<view class="main_header">
					<HeadTit title="苗木开单">
					</HeadTit>
				</view>

				<view class="main_form_wrap">
					<view class="main_form">
						<van-row>
							<van-col span="6">
								<view class="tip">温馨提示</view>
							</van-col>
						</van-row>

						<van-row>
							<van-col span="24">
								<view class="desc">
									供应商通过开本开单系统出具的订单，只能选择系统内的用户。
									供应商通过开本开单系统出具的订单，只能选择系统内的用户。
									供应商通过开本开单系统出具的订单，只能选择系统内的用户。
								</view>
							</van-col>
						</van-row>

						<van-row>
							<van-col span="24">
								<view class="selectTit tit">请选择用户
									<text class="required">*</text>
								</view>
								<view class="dropItem">
									<Drop  value="种植户手机号(133222222222)" selectColor="#bfa" :candidates="candidates" labelWidth="200rpx" color="gray"></Drop>
								</view>
								


							</van-col>
						</van-row>

						<van-row>
							<van-col span="10">
								<view class="miaomu_class tit">
									<text>苗木品种</text>
								</view>
							</van-col>
						</van-row>
						<van-row>
							
							<van-checkbox-group style="display: flex;justify-content: space-between;flex-wrap: wrap;" :value="result" @change="onChange">
							  <van-checkbox shape="square" checked-color="#000" name="a">复选框 a</van-checkbox>
							  <van-checkbox  shape="square" checked-color="#000" name="b">复选框 b</van-checkbox>
							  <van-checkbox  shape="square" checked-color="#000" name="c">复选框 c</van-checkbox>
							   <van-checkbox  shape="square" checked-color="#000" name="c">复选框 c</van-checkbox>
							</van-checkbox-group>
						</van-row>
						
						<van-row>
							<van-col span="24">
								<view class="formInput" v-for="item in 4">
									<view class="inputTit">
										<text class="tit">桂热一号数量</text>
										<text class="required">*</text>
									</view>
									<van-cell-group>
									  <van-field
									    :value="value"
										
									    placeholder="请输入开单数量"
									    :border="true"
									  />
									</van-cell-group>
								</view>
								
								<view>
									<view class="selectTit tit">请选择用户
										<text class="required">*</text>
									</view>
									<view class="dropItem">
										<Drop  placeholder="种植户手机号(133222222222)" value="" selectColor="#bfa" :candidates="candidates" labelWidth="200rpx" color="gray"></Drop>
									</view>
								</view>
								
							</van-col>
						</van-row>
						
						<CommitButton title="提交并生成二维码"></CommitButton>
							
						
							
					
						
					</view>
				</view>
			</view>
		</view>
		<Footer></Footer>
		
		

	</view>
</template>

<script>
	import Header from "../../components/header.vue"
	import Footer from "../../components/footer.vue"
	import HeadTit from "../../components/head_tit.vue"
	import Drop from "../../components/cuihai-combox/cuihai-combox.vue"
	import CommitButton from "../../components/commitButton.vue"
	export default {
		data() {
			return {
				checked:true,
				value:'',
				 result: ['a', 'b'],
				candidates:[
					'你好a',
					'zaijian'
				],
				
				
			}
		},
	
		components: {
			Header,
			Footer,
			HeadTit,
			Drop,
			CommitButton
		},
		methods: {
		
			onChange(event) {
				// console.log(this)
				// console.log(event)
				this.result = event.detail
				
				 
				
			},
			


		}
	}
</script>

<style lang="scss" scoped>
	.tit{
		font-size: 30rpx;
		color: #000000;
	}
	.van-cell{
		border: 1px solid red !important;
		margin-bottom: 40rpx;
	}
	.required {
		color: red;
		margin-left: 20rpx;
	
	}
	.van-dropdown-menu__item {
		display: flex;
		justify-content: flex-start !important;
		border: 1px solid orange !important;

	}
	.van-checkbox{
		margin-bottom: 20rpx !important;
	}
	.dropItem{
		padding: 15rpx;
		padding-left: 25rpx;
		border: 1px solid gray;
		margin-top: 20rpx;
		margin-bottom: 30rpx;
	}

	.br {
		border: 1px solid red;
	}

	.main_wrap {
		padding: 20rpx;

		.main {
			// height: 400rpx;
			border-radius: 16rpx;

			.main_header {
				padding-left: 20rpx;
				border-bottom: 6rpx solid red;
				padding-right: 20rpx;
				padding-top: 20rpx;
			}

			.main_form_wrap {
				padding: 40rpx 20rpx 0;

				.main_form {
					.inputTit{
						margin-bottom: 25rpx;
					}
					.miaomu_class{
						margin-bottom: 20rpx;
					}
					.tip {
						font-size: 36rpx;
						font-weight: bold;
					}

					.desc {
						font-size: 36rpx;
						color: gray;

					}

					.selectTit {
						height: 30rpx;
						line-height: 30rpx;
						
						
					}
					
					

				}
			}

		}
	}
</style>
